<template>
  <div class="middle-section">
    <!-- 左侧信息总览 -->
    <div class="left-panel" ref="leftPanel">
      <div class="info-card" v-for="(item, index) in systemInfo" :key="index">
        <div class="info-title">
          <span> <font-awesome-icon icon="star" />{{ item.title }}</span>
        </div>
        <div class="info-value" :class="item.status">
          <span :class="item.state">{{ item.value }}</span>
          <span class="unit " :class="item.state">{{ item.unit }}</span>
        </div>

        <!-- 设置状态图标 -->
        <div class="status-icon" :class="item.icon">
          <!-- <i class="el-icon-check"></i> -->
          <!-- <el-icon><Check /></el-icon> -->
          <el-icon v-if="item.icon === 'ON'">
            <Open class="open-icon" />
          </el-icon>
          <el-icon v-else>
            <TurnOff class="off-icon" />
          </el-icon>
        </div>

        <!-- 设备主要参数 -->
        <div class="device-parameters">
          <div class="parameter-item">
            <span class="label">{{ item.param1_L }}</span>
            <span class="value">{{ item.param1 }}</span>
            <span class="label">{{ item.param1_R }}</span>
          </div>
          <div class="parameter-item">
            <span class="label">{{ item.param2_L }}</span>
            <span class="value">{{ item.param2 }}</span>
            <span class="label">{{ item.param2_R }}</span>
          </div>
          <div class="parameter-item">
            <span class="label">{{ item.param3_L }}</span>
            <span class="value">{{ item.param3 }}</span>
            <span class="label">{{ item.param3_R }}</span>
          </div>
        </div>

        <!-- 仪表盘 -->
        <div class="gauge-panel">
          <div :ref="el => { if (el) gaugeRefs[index] = el }" class="gauge-container" :class="item.state"></div>
        </div>
      </div>
      <!-- 核心设备信息推送 -->
      <!-- <div class="alarm-panel" v-if="alarms.length">
        <div class="alarm-header">
          <i class="el-icon-warning" />
        </div>
        <div class="alarm-list">
          <div v-for="alarm in alarms" :key="alarm.time" class="alarm-item" :class="alarm.type">
            <span>{{ alarm.message }}</span>
          </div>
        </div>
      </div> -->
    </div>

    <!-- 中部设备运行组态图 -->
    <div class="center-panel">
      <div class="grid-container">
        <!-- 第一行 -->
         <!-- PV -->
        <div class="grid-item">  
          <div class="image-container">
            <img class="deviceImg" :src="images[0].url" alt="Image 1">
            <h3><font-awesome-icon icon="sun" />{{ images[0].title }}</h3>
          </div>
        </div>
        <!-- 平台 -->
        <div class="grid-item center-column">
          <div class="image-container">
            <img class="deviceImg" :src="images[1].url" alt="Image 2">
            <h3><font-awesome-icon icon="laptop" />{{ images[1].title }}</h3>
          </div>
        </div>
        <!-- 风机 -->
        <div class="grid-item">
          <div class="image-container">
            <img class="FanImg deviceImg" :src="images[2].url" alt="Image 3">
            <h3><span class="iconfont    icon-fengji"></span>{{ images[2].title }}</h3>
          </div>
        </div>

        <!-- 第二行 -->
         <!-- 电池 -->
        <div class="grid-item">
          <div class="image-container">
            <img class="deviceImg" @mouseenter="handleMouseEnter" :src="images[3].url" alt="Image 4">
            <h3><span class="iconfont icon-lidianchi1"></span>{{ images[3].title }}</h3>
          </div>
        </div>
        <!-- 逆变器 -->
        <div class="grid-item center-column">
          <div class="image-container">
            <img class="deviceImg" :src="images[4].url" alt="Image 5">
            <h3><span class="iconfont icon-a-zhiliunibianqi"></span>{{ images[4].title }}</h3>
          </div>
        </div>
        <!-- 电网 -->
        <div class="grid-item">
          <div class="image-container">
            <img class="deviceImg" :src="images[8].url" alt="Image 6">
            <h3><span class="iconfont icon-dianwang1"></span>{{ images[5].title }}</h3>
          </div>
        </div>

        <!-- 第三行 -->
         <!-- 发电机 -->
        <div class="grid-item">
          <div class="image-container">
            <img class="deviceImg" :src="images[6].url" alt="Image 7">
            <h3> <span class="iconfont icon-chaiyoufadianji4"></span>{{ images[6].title }}</h3>
          </div>
        </div>
        <!-- 负载 -->
        <div class="grid-item center-column">
          <div class="image-container">
            <img class="deviceImg" :src="images[7].url" alt="Image 8">
            <h3><span class="iconfont icon-fuzai-gray"></span>{{ images[7].title }}</h3>
          </div>
        </div>
        <!-- 重要负载 -->
        <div class="grid-item">
          <div class="image-container">
            <img class="deviceImg" :src="images[5].url" alt="Image 9">
            <h3><span class="iconfont icon-DNSfuwuqi"></span>{{ images[8].title }}</h3>
          </div>
        </div>
      </div>

      <!-- 电流特效 -->
      <FlowEffect />
    </div>

    <!-- 右侧重要信息 -->
    <div class="right-panel">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="故障" class="faults" name="faults">
          <div class="event-cards">
            <div v-for="event in topFaults" :key="event.id" class="event-card">
              <div class="event-title"> <span :class="event.class">{{ event.title }}</span> &nbsp;<span
                  :class="event.class">{{ event.time }}</span></div>
              <div class="event-content"><span :class="event.class">{{ event.content }}</span></div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="警告" class="warnings" name="warnings">
          <div class="event-cards">
            <div v-for="event in topWarnings" :key="event.id" class="event-card">
              <div class="event-title"> <span :class="event.class">{{ event.title }}</span> &nbsp;<span
                  :class="event.class">{{ event.time }}</span></div>
              <div class="event-content"><span :class="event.class">{{ event.content }}</span></div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="信息" class="important" name="important">
          <div class="event-cards">
            <div v-for="event in topImportant" :key="event.id" class="event-card">
              <div class="event-title"> <span :class="event.class">{{ event.title }}</span> &nbsp;<span
                  :class="event.class">{{ event.time }}</span></div>
              <div class="event-content"><span :class="event.class">{{ event.content }}</span></div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, getCurrentInstance, nextTick } from 'vue'
import { useSystemStore } from '@/pinia/modules/system'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import FlowEffect from './FlowEffect/FlowEffect.vue'
import { Check, Close, Open, TurnOff,DataLine } from '@element-plus/icons-vue'  // 添加这行
const { proxy } = getCurrentInstance()
const gaugeRefs = ref([])
const gauges = ref([])

// 仪表盘样式配置
const gaugeConfig = {
  // 字体相关
  fonts: {
    // 刻度标签文字样式（仪表盘外圈的数字）
    axisLabel: {
      fontSize: 6,        // 可以调整数字大小，单位是像素
      fontFamily: 'Arial', // 可以换成其他字体，如 'Microsoft YaHei'
      color: '#299ed5',     // 可以修改颜色代码，支持 RGB、HEX、颜色名称
      distance: -25        // 调整标签与轴线的距离
    },
    // 仪表盘中心数值样式（显示具体数值的文字）
    detail: {
      fontSize: 8,        // 通常比刻度标签大一些
      fontFamily: 'Arial', // 同上
      color: '#299ed5',     // 同上
      offsetCenter: [0, '60%']  // 调整数值在仪表盘中的位置 [x, y]
    }
  },
  // 颜色相关
  colors: {
    pointer: '#299ed5',
    axisLine: [
      [0.3, '#67e0e3'],  // 0-30% 浅蓝色
      [0.7, '#37a2da'],  // 30-70% 中蓝色
      [1, '#fd666d']     // 70-100% 红色
    ],
    splitLine: '#fff',
    axisTick: '#fff'
  },
  // 线条宽度
  lineWidth: {
    axisLine: 2,          // 仪表盘外圈的粗细
    splitLine: 2,         // 长分割线的粗细
    axisTick: 1      // 短刻度线的粗细
  },
  // 间距相关
  distance: {
    axisTick: -10,        // 短刻度线向内偏移的距离
    splitLine: -15,       // 长分割线向内偏移的距离
    axisLabel: -20        // 刻度标签向内偏移的距离
    // 注意：负数表示向内偏移，正数表示向外偏移
  },
  // 角度相关
  angle: {
    start: 205,           // 起始角度，225度是左侧
    end: -25             // 结束角度，-45度是右侧
    // 这两个值决定了仪表盘的形状：
    // 180到0度 = 半圆形
    // 225到-45度 = 3/4圆形
    // 360到0度 = 整圆形
  }
}

// 创建仪表盘基础配置
/**
 * 创建仪表盘配置选项
 * @param {number} max - 仪表盘的最大值，决定量程范围
 * @param {number} value - 当前显示的值
 * @param {string} formatter - 数值格式化模板，如 '{value}W' 或 '{value}'
 * @returns {Object} ECharts仪表盘配置对象
 */
const createGaugeOption = (max, value, formatter, index) => {
  // 如果是电池SOC仪表盘，返回空配置
  if (index === 1) {
    return {
      series: []
    }
  }

  return {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}'
    },
    series: [{
      name: '仪表盘',
      type: 'gauge',
      radius: '75%',                // 仪表盘半径，占容器的百分比
      center: ['50%', '55%'],       // 中心点位置，稍微向下偏移
      startAngle: gaugeConfig.angle.start,  // 起始角度，从左侧开始
      endAngle: gaugeConfig.angle.end,      // 结束角度，到右侧结束
      min: 0,                       // 最小值
      max: max,                     // 最大值
      splitNumber: 8,               // 分割段数，影响刻度密度
      // 仪表盘轴线样式配置
      axisLine: {
        roundCap: true,             // 轴线末端为圆角
        lineStyle: {
          width: gaugeConfig.lineWidth.axisLine,  // 轴线宽度
          color: gaugeConfig.colors.axisLine       // 轴线颜色
        }
      },
      // 指针样式配置
      pointer: {
        icon: 'path://M-1,-1 L1,-1 L1,20 L-1,20 Z',  // 自定义指针形状：简化的矩形
        width: 1.5,                 // 指针宽度
        length: '90%',              // 指针长度，相对于半径
        offsetCenter: [0, 0],       // 指针中心点偏移
        itemStyle: {
          color: '#299ed5'          // 指针颜色
        }
      },
      // 刻度样式配置
      axisTick: {
        distance: gaugeConfig.distance.axisTick,  // 刻度线与轴线的距离
        length: 8,                  // 刻度线长度
        lineStyle: {
          color: gaugeConfig.colors.axisTick,     // 刻度线颜色
          width: gaugeConfig.lineWidth.axisTick   // 刻度线宽度
        }
      },
      // 分隔线样式配置
      splitLine: {
        distance: gaugeConfig.distance.splitLine,  // 分隔线与轴线的距离
        length: 10,                 // 分隔线长度
        lineStyle: {
          color: gaugeConfig.colors.splitLine,     // 分隔线颜色
          width: gaugeConfig.lineWidth.splitLine   // 分隔线宽度
        }
      },

      // 刻度标签样式配置
      axisLabel: {
        color: gaugeConfig.fonts.axisLabel.color,      // 标签文字颜色
        distance: gaugeConfig.fonts.axisLabel.distance, // 标签与轴线距离
        fontSize: gaugeConfig.fonts.axisLabel.fontSize, // 标签字体大小
        fontFamily: gaugeConfig.fonts.axisLabel.fontFamily  // 标签字体
      },

      // 仪表盘数值显示样式配置
      detail: {
        valueAnimation: true,       // 启用数值动画
        formatter: formatter,        // 数值格式化函数
        color: gaugeConfig.fonts.detail.color,     // 数值颜色
        fontSize: gaugeConfig.fonts.detail.fontSize, // 数值字体大小
        fontFamily: gaugeConfig.fonts.detail.fontFamily, // 数值字体
        offsetCenter: [0, '50%']    // 数值显示位置偏移
      },

      // 仪表盘数据
      data: [{
        value: value,              // 当前值
        name: ''                   // 名称（此处为空）
      }]
    }]
  }
}

/**  这是创建电池基础--电池方法1
 * 创建电池样式的仪表盘选项
 * @param {number} maxValue - 最大值（通常为100，表示电池满电量）
 * @param {number} value - 当前电量值（0-100之间的数值）
 * @param {Object} options - 电池外观配置选项
 * @param {number} options.batteryWidthRatio - 电池宽度占容器宽度的比例，默认0.8
 * @param {number} options.batteryHeightRatio - 电池高度占容器高度的比例，默认0.4
 * @param {number} options.tipWidthRatio - 电池头部宽度占电池高度的比例，默认0.4
 * @param {number} options.tipHeightRatio - 电池头部高度占电池高度的比例，默认1
 * @param {number} options.borderRadius - 电池主体圆角半径，默认3
 * @param {number} options.tipRadius - 电池头部圆角半径，默认1
 * @param {number} options.borderWidth - 边框宽度，默认3
 * @returns {Object} ECharts的配置项
 */
const createBatteryGaugeOption = (maxValue, value, options = {}) => {  // 创建电池样式的仪表盘选项
  // 设置默认值
  const {
    batteryWidthRatio = 0.8,    // 电池主体宽度占容器宽度的比例，默认80% // 电池配置参数
    batteryHeightRatio = 0.6,   // 电池主体高度占容器高度的比例，默认40%
    tipWidthRatio = 0.2,        // 电池头部宽度占电池高度的比例，默认40%
    tipHeightRatio = 0.5,       // 电池头部高度占电池高度的比例，默认50%
    borderRadius = 3,           // 电池主体圆角半径，默认3像素
    tipRadius = 1,              // 电池头部圆角半径，默认1像素
    borderWidth = 3             // 电池边框宽度，默认3像素
  } = options

  // 根据电量值设置不同的颜色
  const batteryColor = value >= 80 ? '#67C23A' :     // 电量>=80%时显示深绿色
    value >= 60 ? '#85CE61' :       // 电量>=60%时显示浅绿色
      value >= 40 ? '#E6A23C' :       // 电量>=40%时显示橙色
        value >= 20 ? '#F56C6C' :       // 电量>=20%时显示红色
          '#F56C6C'                       // 电量<20%时显示红色
  return {
    backgroundColor: 'transparent',                   // 设置背景透明
    grid: {
      top: '30%',                                    // 上边距，留出空间防止文字溢出
      bottom: '30%',                                 // 下边距，留出空间显示百分比
      left: '15%',                                   // 左边距，保持居中
      right: '15%'                                   // 右边距，保持居中
    },
    xAxis: { show: false },                          // 隐藏X轴
    yAxis: { show: false },                          // 隐藏Y轴
    series: [
      {
        type: 'custom',                              // 使用自定义图形
        renderItem: (params, api) => {
          const width = api.getWidth();              // 获取容器宽度
          const height = api.getHeight();            // 获取容器高度
          const batteryWidth = width * batteryWidthRatio;    // 计算电池主体宽度
          const batteryHeight = height * batteryHeightRatio; // 计算电池主体高度
          const tipWidth = batteryHeight * tipWidthRatio;    // 计算电池头部宽度
          const tipHeight = batteryHeight * tipHeightRatio;  // 计算电池头部高度
          const fillWidth = (batteryWidth - 2 * borderWidth) * (value / 100);  // 计算填充宽度
          const centerX = width / 2;                 // 计算中心点X坐标
          const centerY = height / 2;                // 计算中心点Y坐标

          // 绘制电池主体
          const batteryBody = {
            type: 'rect',
            shape: {
              x: centerX - batteryWidth / 2,
              y: centerY - batteryHeight / 2,
              width: batteryWidth,
              height: batteryHeight,
              r: borderRadius
            },
            style: {
              fill: 'transparent',
              stroke: '#d3d3d3',
              lineWidth: borderWidth
            },
            className: 'battery',
          }

          // 绘制电池头部
          const batteryTip = {
            type: 'rect',
            shape: {
              x: centerX + batteryWidth / 2,
              y: centerY - tipHeight / 2,
              width: tipWidth,
              height: tipHeight,
              r: tipRadius
            },
            style: {
              fill: '#d3d3d3'
            }
          }

          // 绘制电量填充
          const batteryFill = {
            type: 'rect',
            shape: {
              x: centerX - batteryWidth / 2 + borderWidth,
              y: centerY - batteryHeight / 2 + borderWidth,
              width: fillWidth,
              height: batteryHeight - 2 * borderWidth,
              r: Math.max(0, borderRadius - borderWidth)
            },
            style: {
              fill: batteryColor
            }
          }

          // 绘制百分比文字
          const batteryText = {
            type: 'text',
            className: 'battery-text',
            style: {
              text: value + '%',
              fill: '#fff',
              fontSize: 12,
              fontWeight: 'bold',
              x: centerX,
              y: centerY - borderWidth - 1,
              textAlign: 'center',
              textBaseline: 'middle'
            }
          }

          // 返回绘制的图形
          return {
            type: 'group',
            children: [batteryBody, batteryTip, batteryFill, batteryText]
          }
        },
        data: [[0, 0]]
      }
    ]
  };
}

// 初始化每个仪表盘
const initGauges = async () => {
  // 等待下一个 tick，确保 DOM 已更新
  await nextTick()

  // 清除现有的图表实例
  gauges.value.forEach(gauge => {
    gauge?.dispose()
  })
  gauges.value = new Array(7).fill(null)

  // 初始化每个仪表盘
  gaugeRefs.value.forEach((el, index) => {
    if (el && index !== 1) { // 跳过电池SOC的初始化
      const gauge = proxy.$echarts.init(el)
      let option

      // 获取实时数据，如果不存在则使用默认值
      const realTimeData = systemStore.realTimeData || {}

      // 根据索引配置不同的仪表盘参数
      switch (index) {
        case 0: // 逆变器功率仪表盘
          option = createGaugeOption(
            6000,                                    // 最大值：6000W
            realTimeData.inverterPower || 1330,      // 当前值
            '{value}W',                              // 显示单位：瓦特
            index                                    // 传入索引
          )
          break
        case 2: // 光伏功率仪表盘
          option = createGaugeOption(
            6000,                                    // 最大值：5000W
            realTimeData.solarPower || 660,          // 当前值：从系统数据获取，默认660W
            '{value}W'                               // 显示单位：瓦特
          )
          break
        case 3: // 负载功率仪表盘
          option = createGaugeOption(
            6000,                                    // 最大值：8000W
            realTimeData.loadPower || 1200,          // 当前值：从系统数据获取，默认1200W
            '{value}W'                               // 显示单位：瓦特
          )
          break
        case 4: // 电网功率仪表盘
          option = createGaugeOption(
            12000,                                   // 最大值：10000W
            realTimeData.gridPower || 1200,          // 当前值：从系统数据获取，默认1200W
            '{value}W'                               // 显示单位：瓦特
          )
          break
        case 5: // 柴油发电机功率仪表盘
          option = createGaugeOption(
            10000,                                   // 最大值：15000W
            realTimeData.dieselPower || 1200,        // 当前值：从系统数据获取，默认1200W
            '{value}W'                               // 显示单位：瓦特
          )
          break
        case 6: // 风力发电机功率仪表盘
          option = createGaugeOption(
            3000,                                    // 最大值：3000W
            realTimeData.windPower || 1200,          // 当前值：从系统数据获取，默认1200W
            '{value}W'                               // 显示单位：瓦特
          )
          break
        default:
          option = createGaugeOption(1000, 0, '{value}W', index)
      }

      gauge.setOption(option)
      gauges.value[index] = gauge
    }
  })

  // 单独初始化电池图标
  await initBatteryIcon()
}

// 初始化电池图标--电池方法2
const initBatteryIcon = async () => {
  await nextTick()
  const batteryEl = gaugeRefs.value[1] // 获取电池SOC对应的DOM元素
  if (batteryEl) {
    const battery = proxy.$echarts.init(batteryEl)
    const realTimeData = systemStore.realTimeData || {}
    const {
      batteryWidthRatio = 0.8,    // 电池主体宽度占容器宽度的比例，默认80% // 电池配置参数
      batteryHeightRatio = 0.6,   // 电池主体高度占容器高度的比例，默认40%
      tipWidthRatio = 0.2,        // 电池头部宽度占电池高度的比例，默认40%
      tipHeightRatio = 0.5,       // 电池头部高度占电池高度的比例，默认50%
      borderRadius = 4,           // 电池主体圆角半径，默认3像素
      tipRadius = 1,              // 电池头部圆角半径，默认1像素
      borderWidth = 3             // 电池边框宽度，默认3像素
    } = {}
    const option = createBatteryGaugeOption(
      100,                                    // 最大值：100%
      realTimeData.batterySOC || 91,         // 当前SOC值：从系统数据获取，默认100%
      {
        batteryWidthRatio,
        batteryHeightRatio,
        tipWidthRatio,
        tipHeightRatio,
        borderRadius,
        tipRadius,
        borderWidth
      }
    )
    battery.setOption(option)
    gauges.value[1] = battery // 保存电池图表实例
  }
}

// // 更新电池电量显示方法-不删除
// const updateBatteryLevel = (value) => {
//   const battery = gauges.value[1]
//   if (battery) {
//     const {
//       batteryWidthRatio = 0.8,    // 电池主体宽度占容器宽度的比例，默认80% // 电池配置参数
//       batteryHeightRatio = 0.6,   // 电池主体高度占容器高度的比例，默认40%
//       tipWidthRatio = 0.4,        // 电池头部宽度占电池高度的比例，默认40%
//       tipHeightRatio = 0.5,       // 电池头部高度占电池高度的比例，默认50%
//       borderRadius = 3,           // 电池主体圆角半径，默认3像素
//       tipRadius = 1,              // 电池头部圆角半径，默认1像素
//       borderWidth = 3             // 电池边框宽度，默认3像素
//     } = {}
//     const option = createBatteryGaugeOption(100, value, {
//       batteryWidthRatio,
//       batteryHeightRatio,
//       tipWidthRatio,
//       tipHeightRatio,
//       borderRadius,
//       tipRadius,
//       borderWidth
//     })
//     battery.setOption(option)
//   }
// }

// // 更新电池仪表盘数据
// const updateGaugeValue = (index, value) => {
//   if (index === 1) {
//     // 如果是电池SOC，使用专门的更新函数
//     updateBatteryLevel(value)
//   } else {
//     const gauge = gauges.value[index]
//     if (gauge) {
//       const option = createGaugeOption(
//         gauge.getOption().series[0].max,
//         value,
//         '{value}W',
//         index  // 传入索引
//       )
//       gauge.setOption(option)
//     }
//   }
// }

const systemStore = useSystemStore()
const deviceContainer = ref(null)
// const hoveredDevice = ref(null)
const leftPanel = ref(null);


// 系统信息数据
const systemInfo = computed(() => [
  {
    title: '逆变器',
    value: systemStore.realTimeData?.inverterPower || 1330,
    unit: 'W',
    status: systemStore.realTimeData?.deviceStatus?.inverter || 'normal',
    icon: 'ON',
    // icon: 'el-icon-sun',
    dcState: 'run',
    state: 'on',
    dcInputCurrent: 50,

    param1_L: "AC:",
    param1: 220,
    param1_R: "V",

    param2_L: "current:",
    param2: 6,
    param2_R: "A",

    param3_L: "mode:",
    param3: 'firstLoad',//this.model,
    param3_R: "",


  },
  {
    title: '电池',
    value: systemStore.realTimeData?.batterySOC || 90,  //电流  
    unit: 'A',
    status: systemStore.realTimeData?.deviceStatus?.battery || 'normal',
    // icon: 'el-icon-battery-full',
    icon: 'ON',
    dcState: 'Charge',
    state: 'on',
    voltage: 51.2,
    currentCunit: 'A',
    voltageCunit: 'DC',

    param1_L: "DC:",
    param1: 53.1,
    param1_R: "V",
    param2_L: "Current:",
    param2: 6,
    param2_R: "A",
    param3_L: "State:",
    param3: 'Charge',//this.model,
    param3_R: "",
  },
  {
    title: '光伏',
    value: systemStore.realTimeData?.solarPower || 660,
    unit: 'W',
    icon: 'ON',
    state: 'on',
    dcState: 'run',
    voltage: 150,
    status: systemStore.realTimeData?.deviceStatus?.solar || 'normal',
    currentCunit: 'A',
    voltageCunit: 'AC',
    param1_L: "DC:",
    param1: 103.1,
    param1_R: "V",
    param2_L: "Current:",
    param2: 6.4,
    param2_R: "A",
    param3_L: "State:",
    param3: 'Generating',//this.model,
    param3_R: "",
  },
  {
    title: '主负载',
    value: systemStore.realTimeData?.solarPower || 1200,
    unit: 'W',
    icon: 'ON',
    state: 'on',
    dcState: 'run',
    voltage: 230,
    status: systemStore.realTimeData?.deviceStatus?.solar || 'normal',
    currentCunit: 'A',
    voltageCunit: 'AC',
    param1_L: "AC:",
    param1: 220,
    param1_R: "V",
    param2_L: "Current:",
    param2: 5.4,
    param2_R: "A",
    param3_L: "State:",
    param3: 'Run',//this.model,
    param3_R: "",
  },
  {
    title: '次负载',
    value: systemStore.realTimeData?.solarPower || 1000,
    unit: 'W',
    icon: 'ON',
    state: 'on',
    dcState: 'run',
    voltage: 230,
    status: systemStore.realTimeData?.deviceStatus?.solar || 'normal',
    currentCunit: 'A',
    voltageCunit: 'AC',
    param1_L: "AC:",
    param1: 220,
    param1_R: "V",
    param2_L: "Current:",
    param2: 4.5,
    param2_R: "A",
    param3_L: "State:",
    param3: 'Run',//this.model,
    param3_R: "",
  },
  {
    title: '电网',
    value: systemStore.realTimeData?.solarPower || 200,
    unit: 'W',
    icon: 'ON',
    state: 'on',
    dcState: 'input',
    voltage: 230,
    status: systemStore.realTimeData?.deviceStatus?.solar || 'normal',
    currentCunit: 'A',
    voltageCunit: 'AC',
    // model: 'G2L' ,//或L2G,
    param1_L: "AC:",
    param1: 223,
    param1_R: "V",
    param2_L: "Current:",
    param2: 0.89,
    param2_R: "A",
    param3_L: "Mode:",
    param3: 'G2L',//this.model,
    param3_R: "",

  },
  {
    title: '柴油发电机',
    value: systemStore.realTimeData?.solarPower || 0,
    unit: 'W',
    state: 'off',
    icon: 'OFF',
    dcState: 'off',
    voltage: 0,
    status: systemStore.realTimeData?.deviceStatus?.solar || 'normal',
    currentCunit: 'A',
    voltageCunit: 'AC',
    // model: 'G2L'
    param1_L: "AC:",
    param1: 0,
    param1_R: "V",
    param2_L: "Current:",
    param2: 0,
    param2_R: "A",
    param3_L: "State:",
    param3: 'Stop',//this.model,
    param3_R: "",

  },
  {
    title: '风力发电机',
    value: systemStore.realTimeData?.solarPower || 300,
    unit: 'W',
    icon: 'ON',
    state: 'on',
    // 电压
    voltage: systemStore.realTimeData?.solarPower || 300,
    dcState: 'run',
    status: systemStore.realTimeData?.deviceStatus?.solar || 'normal',
    currentCunit: 'A',
    voltageCunit: 'AC',
    // model: 'G2L'
    param1_L: "AC:",
    param1: 120,
    param1_R: "V",
    param2_L: "Current:",
    param2: 1.6,
    param2_R: "A",
    param3_L: "State:",
    param3: 'Generation',//this.model,
    param3_R: "",
  }
])

// 报警信息
// const alarms = computed(() => systemStore.realTimeData?.alarms || [])



const events = ref([
  // 故障事件类（红色警示）
  { id: 1, title: '故障事件-A1', class: 'faults', content: '故障事件:电池通讯故障！请尽快检查并排除故障!', time: '2023-10-01 10:00:01', category: 'faults' },
  { id: 2, title: '故障事件-A2', class: 'faults', content: '故障事件:电池通讯故障！请尽快检查并排除故障!', time: '2023-10-01 10:00:01', category: 'faults' },
  { id: 3, title: '故障事件-A3', class: 'faults', content: '故障事件:逆变器过压保护！系统已自动关闭，请检查输入电压！', time: '2023-10-04 09:15:30', category: 'faults' },
  { id: 4, title: '故障事件-A4', class: 'faults', content: '故障事件:电池温度异常！请检查散热系统！', time: '2023-10-05 11:20:45', category: 'faults' },
  { id: 5, title: '故障事件-A5', class: 'faults', content: '故障事件:系统短路保护！请检查线路连接！', time: '2023-10-06 14:30:20', category: 'faults' },
  { id: 6, title: '故障事件-A6', class: 'faults', content: '故障事件:电池组欠压！请及时充电！', time: '2023-10-07 16:45:10', category: 'faults' },
  { id: 7, title: '故障事件-A7', class: 'faults', content: '故障事件:功率模块故障！需要维修处理！', time: '2023-10-08 08:25:15', category: 'faults' },
  { id: 8, title: '故障事件-A8', class: 'faults', content: '故障事件:BMS保护触发！电池组紧急停机！需立即处理！', time: '2023-10-26 09:20:15', category: 'faults' },
  { id: 9, title: '故障事件-A9', class: 'faults', content: '故障事件:主控制器通信中断！系统无法远程操作！', time: '2023-10-27 11:35:40', category: 'faults' },
  { id: 10, title: '故障事件-A10', class: 'faults', content: '故障事件:光伏阵列接地故障！存在安全隐患！', time: '2023-10-28 14:15:25', category: 'faults' },
  { id: 11, title: '故障事件-A11', class: 'faults', content: '故障事件:变流器IGBT故障！需要更换部件！', time: '2023-10-29 16:40:30', category: 'faults' },
  { id: 12, title: '故障事件-A12', class: 'faults', content: '故障事件:电网并网点检测异常！系统已切换到离网模式！', time: '2023-10-30 10:25:50', category: 'faults' },
  { id: 13, title: '故障事件-A13', class: 'faults', content: '故障事件:DC/DC变换器过温保护！功率已限制！', time: '2023-10-31 13:55:20', category: 'faults' },
  { id: 14, title: '故障事件-A14', class: 'faults', content: '故障事件:储能系统绝缘故障！需要专业检修！', time: '2023-11-01 15:30:45', category: 'faults' },

  // 警告事件类（黄色提醒）
  { id: 15, title: '警告事件-W1', class: 'warnings', content: '警告事件:逆变器温度过高！请检查逆变器散热风扇是否正常运转！', time: '2023-10-02 10:00:02', category: 'warnings' },
  { id: 16, title: '警告事件-W2', class: 'warnings', content: '警告事件:逆变器温度过高！请检查逆变器散热风扇是否正常运转！', time: '2023-10-02 10:00:02', category: 'warnings' },
  { id: 17, title: '警告事件-W3', class: 'warnings', content: '警告事件:电池电量低于20%！请注意及时充电！', time: '2023-10-09 10:10:30', category: 'warnings' },
  { id: 18, title: '警告事件-W4', class: 'warnings', content: '警告事件:系统负载接近额定值！请注意用电负荷！', time: '2023-10-10 13:20:40', category: 'warnings' },
  { id: 19, title: '警告事件-W5', class: 'warnings', content: '警告事件:环境温度过高！请检查空调系统！', time: '2023-10-11 15:35:25', category: 'warnings' },
  { id: 20, title: '警告事件-W6', class: 'warnings', content: '警告事件:电池充放电次数接近阈值！建议进行维护！', time: '2023-10-12 09:40:50', category: 'warnings' },
  { id: 21, title: '警告事件-W7', class: 'warnings', content: '警告事件:系统效率下降！建议检查设备状态！', time: '2023-10-13 11:55:15', category: 'warnings' },
  { id: 22, title: '警告事件-W8', class: 'warnings', content: '警告事件:UPS电池组寿命预警！建议规划更换时间！', time: '2023-11-02 08:45:30', category: 'warnings' },
  { id: 23, title: '警告事件-W9', class: 'warnings', content: '警告事件:系统运行时间超过维护周期！请安排例行检查！', time: '2023-11-03 10:20:15', category: 'warnings' },
  { id: 24, title: '警告事件-W10', class: 'warnings', content: '警告事件:能量管理系统数据备份提醒！请及时备份！', time: '2023-11-04 11:50:40', category: 'warnings' },
  { id: 25, title: '警告事件-W11', class: 'warnings', content: '警告事件:变压器温度接近预警值！请关注运行状态！', time: '2023-11-05 14:25:35', category: 'warnings' },
  { id: 26, title: '警告事件-W12', class: 'warnings', content: '警告事件:系统存储空间低于20%！请及时清理数据！', time: '2023-11-06 16:15:50', category: 'warnings' },
  { id: 27, title: '警告事件-W13', class: 'warnings', content: '警告事件:通信网络带宽使用率过高！可能影响实时监控！', time: '2023-11-07 09:30:25', category: 'warnings' },
  { id: 28, title: '警告事件-W14', class: 'warnings', content: '警告事件:备用电源电量不足！建议检查充电系统！', time: '2023-11-08 13:40:55', category: 'warnings' },

  // 重要信息类（蓝色提示）
  { id: 29, title: '重要信息-T1', class: 'important', content: '重要信息:电池包充电完成!', time: '2023-10-03 10:00:03', category: 'important' },
  { id: 30, title: '重要信息-T2', class: 'important', content: '重要信息:电池包充电完成!', time: '2023-10-03 10:00:03', category: 'important' },
  { id: 31, title: '重要信息-T3', class: 'important', content: '重要信息:系统例行维护完成！所有参数正常！', time: '2023-10-14 08:30:20', category: 'important' },
  { id: 32, title: '重要信息-T4', class: 'important', content: '重要信息:电池组均衡充电启动！预计需要2小时！', time: '2023-10-15 10:45:30', category: 'important' },
  { id: 33, title: '重要信息-T5', class: 'important', content: '重要信息:系统软件更新完成！新功能已启用！', time: '2023-10-16 14:15:40', category: 'important' },
  { id: 34, title: '重要信息-T6', class: 'important', content: '重要信息:能量管理系统优化完成！效率提升10%！', time: '2023-10-17 16:20:55', category: 'important' },
  { id: 35, title: '重要信息-T7', class: 'important', content: '重要信息:系统安全检查完成！各项指标达标！', time: '2023-10-18 11:40:25', category: 'important' },
  { id: 36, title: '重要信息-T8', class: 'important', content: '重要信息:储能系统容量扩容完成！新增20kWh储能！', time: '2023-10-19 09:15:30', category: 'important' },
  { id: 37, title: '重要信息-T9', class: 'important', content: '重要信息:智能调度系统升级成功！运行效率提升15%！', time: '2023-10-20 13:25:40', category: 'important' },
  { id: 38, title: '重要信息-T10', class: 'important', content: '重要信息:光伏系统清洗完成！发电效率恢复最佳！', time: '2023-10-21 10:30:15', category: 'important' },
  { id: 39, title: '重要信息-T11', class: 'important', content: '重要信息:系统年度维护计划完成！设备状态良好！', time: '2023-10-22 14:45:20', category: 'important' },
  { id: 40, title: '重要信息-T12', class: 'important', content: '重要信息:新能源管理模块接入成功！系统功能扩展！', time: '2023-10-23 11:20:35', category: 'important' },
  { id: 41, title: '重要信息-T13', class: 'important', content: '重要信息:储能系统性能测试完成！各项指标优异！', time: '2023-10-24 15:50:45', category: 'important' },
  { id: 42, title: '重要信息-T14', class: 'important', content: '重要信息:能源调度策略优化完成！节能效果显著！', time: '2023-10-25 08:40:55', category: 'important' },

  // 新增故障事件
  { id: 43, title: '故障事件-A15', class: 'faults', content: '故障事件:电池组过温保护触发！系统已进入安全模式！', time: '2024-12-15 00:10:00', category: 'faults' },
  { id: 44, title: '故障事件-A16', class: 'faults', content: '故障事件:逆变器输出电压不稳定！需要专业检修！', time: '2024-12-14 23:30:15', category: 'faults' },
  // 新增警告事件
  { id: 45, title: '警告事件-W15', class: 'warnings', content: '警告事件:系统运行时间过长！建议进行维护检查！', time: '2024-12-15 00:09:30', category: 'warnings' },
  { id: 46, title: '警告事件-W16', class: 'warnings', content: '警告事件:电池充放电效率下降！需要优化管理策略！', time: '2024-12-14 23:40:45', category: 'warnings' },
  // 新增重要信息
  { id: 47, title: '重要信息-T15', class: 'important', content: '重要信息:系统性能优化完成！运行效率提升20%！', time: '2024-12-15 00:08:15', category: 'important' },
  { id: 48, title: '重要信息-T16', class: 'important', content: '重要信息:新版本安全补丁安装完成！系统更加稳定！', time: '2024-12-14 23:50:30', category: 'important' },

  // 新增故障事件
  { id: 49, title: '故障事件-A17', class: 'faults', content: '故障事件:电池管理系统通信异常！影响充放电控制！', time: '2024-12-15 00:13:30', category: 'faults' },
  { id: 50, title: '故障事件-A18', class: 'faults', content: '故障事件:储能系统漏电保护启动！需要安全检查！', time: '2024-12-15 00:13:00', category: 'faults' },
  { id: 51, title: '故障事件-A19', class: 'faults', content: '故障事件:功率转换系统故障！影响能量传输效率！', time: '2024-12-15 00:12:30', category: 'faults' },
  { id: 52, title: '故障事件-A20', class: 'faults', content: '故障事件:主控制器硬件故障！系统功能受限！', time: '2024-12-15 00:12:00', category: 'faults' },

  // 新增警告事件
  { id: 53, title: '警告事件-W17', class: 'warnings', content: '警告事件:系统响应速度变慢！建议检查系统负载！', time: '2024-12-15 00:11:30', category: 'warnings' },
  { id: 54, title: '警告事件-W18', class: 'warnings', content: '警告事件:能量调度算法异常！可能影响系统效率！', time: '2024-12-15 00:11:00', category: 'warnings' },
  { id: 55, title: '警告事件-W19', class: 'warnings', content: '警告事件:备用电源切换频繁！建议检查主电源！', time: '2024-12-15 00:10:30', category: 'warnings' },
  { id: 56, title: '警告事件-W20', class: 'warnings', content: '警告事件:系统数据同步延迟！需要优化网络配置！', time: '2024-12-15 00:10:00', category: 'warnings' },

  // 新增重要信息
  { id: 57, title: '重要信息-T17', class: 'important', content: '重要信息:智能预测模块升级成功！预测准确率提高！', time: '2024-12-15 00:09:30', category: 'important' },
  { id: 58, title: '重要信息-T18', class: 'important', content: '重要信息:储能系统扩容工程启动！预计增加50kWh！', time: '2024-12-15 00:09:00', category: 'important' },
  { id: 59, title: '重要信息-T19', class: 'important', content: '重要信息:系统自动化级别提升！人工干预需求降低！', time: '2024-12-15 00:08:30', category: 'important' },
  { id: 60, title: '重要信息-T20', class: 'important', content: '重要信息:新能源接入接口优化完成！兼容性提升！', time: '2024-12-15 00:08:00', category: 'important' }

])

const activeTab = ref('important')  //设置默认选项

const topFaults = computed(() => {
  return events.value.filter(event => event.category === 'faults').slice(0, 30) //显示0-30条
})

const topWarnings = computed(() => {
  return events.value.filter(event => event.category === 'warnings').slice(0, 30)
})

const topImportant = computed(() => {
  return events.value.filter(event => event.category === 'important').slice(0, 30)
})

function handleTabClick(tab) {
  activeTab.value = tab.name
}

// 图片数据
// 在 script setup 开始处添加导入语句
import pvImg from '@/assets/img/透明光伏2.png'
import pcsImg from '@/assets/img/PCS.png'
import ictImg from '@/assets/img/透明机柜.png'
import batteryImg from '@/assets/img/高压堆叠透明.png'
import fanImg from '@/assets/img/透明静态风机.png'
import fanImg2 from '@/assets/img/fan2.gif'
import houseImg from '@/assets/img/house.png'
import madaImge from '@/assets/img/发电机.png'
import EMS from '@/assets/img/EMS2.png'
import girdImg from '@/assets/img/电网.png'
import { param } from '@/utils'
// import { pa } from 'element-plus/es/locale'

// 组态图设备数据
const images = ref([
  { url: pvImg, title: '太阳能光伏' },
  { url: EMS, title: '管理平台' },
  { url: fanImg, title: '发电风机' },
  { url: batteryImg, title: '电池' },
  { url: pcsImg, title: '逆变器' },
  { url: ictImg, title: '电网' },
  { url: madaImge, title: '发电机' },
  { url: houseImg, title: '一般负载' },
  { url: girdImg, title: '重要负载' },
])

// 初始化3D场景
const initThreeJS = () => {
  if (!deviceContainer.value) return

  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, deviceContainer.value.clientWidth / deviceContainer.value.clientHeight, 0.1, 1000)
  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })

  renderer.setSize(deviceContainer.value.clientWidth, deviceContainer.value.clientHeight)
  deviceContainer.value.appendChild(renderer.domElement)

  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true

  // 设置相机位置
  camera.position.z = 5

  const animate = () => {
    requestAnimationFrame(animate)
    controls.update()
    renderer.render(scene, camera)
  }
  animate()
}

// 风机悬浮事件处理
// 风机图片鼠标离开事件
// 保存原始图片URL的Map
const originalImages = new Map()
// 风机悬浮事件处理
const handleFanMouseEnter = (event) => {
  const target = event.target;
  if (!originalImages.has(target)) {
    originalImages.set(target, target.src); // 保存原始图片
  }
  target.src = fanImg2;
}

// 风机图片鼠标离开事件
const handleFanMouseLeave = (event) => {
  const target = event.target;
  const originalSrc = originalImages.get(target);
  if (originalSrc) {
    // target.src = fanImg; // 恢复原始图片
  }
}

// 设备图片样式处理
const handleDeviceStyle = () => {
  const deviceImgs = document.querySelectorAll('.deviceImg');
  deviceImgs.forEach(img => {
    img.classList.add('grid-itemImg'); // 添加全局样式类
  });
}


// 右侧事件列表自动滚动
 
// 右侧事件列表自动滚动
const autoScrollEvents = () => {
  const eventCards = document.querySelectorAll('.event-cards');
  eventCards.forEach(card => {
    let scrollTop = 0;
    let isScrollingDown = true;
    let isPaused = false;
    let isHovered = false;  // 添加鼠标悬停标志

    // 添加鼠标事件监听
    card.addEventListener('mouseenter', () => {
      isHovered = true;
    });
    card.addEventListener('mouseleave', () => {
      isHovered = false;
    });

    setInterval(() => {
      if (isPaused || isHovered) return;  // 检查是否悬停
      const maxScroll = card.scrollHeight - card.clientHeight;
      if (isScrollingDown) {
        if (scrollTop >= maxScroll) {
          isPaused = true;
          scrollTop = maxScroll;
          card.scrollTop = scrollTop;
          setTimeout(() => {
            isScrollingDown = false;
            isPaused = false;
          }, 1800);
          return;
        }
        scrollTop += 1;
      } else {
        if (scrollTop <= 0) {
          isPaused = true;
          scrollTop = 0;
          card.scrollTop = scrollTop;
          setTimeout(() => {
            isScrollingDown = true;
            isPaused = false;
          }, 1800);
          return;
        }
        scrollTop -= 1;
      }
      card.scrollTop = scrollTop;
    }, 100);
  });
}
// 右侧通用的自动滚动函数 结束
 
// 左侧核心设备信息栏自动滚动
const updateLeftPanelScroll = () => {
  let scrollTop = 0;
  let isScrollingDown = true;
  let isPaused = false;
  let isHovered = false;  // 添加鼠标悬停标志

  // 清除旧的interval
  if (leftPanelInterval) {
    clearInterval(leftPanelInterval);
  }

  // 添加鼠标事件监听
  if (leftPanel.value) {
    leftPanel.value.addEventListener('mouseenter', () => {
      isHovered = true;
    });
    leftPanel.value.addEventListener('mouseleave', () => {
      isHovered = false;
    });
  }

  leftPanelInterval = setInterval(() => {
    if (!leftPanel.value || isPaused || isHovered) return;  // 检查是否悬停
    const maxScroll = leftPanel.value.scrollHeight - leftPanel.value.clientHeight;
    if (isScrollingDown) {
      if (scrollTop >= maxScroll) {
        isPaused = true;
        scrollTop = maxScroll;
        leftPanel.value.scrollTop = scrollTop;
        setTimeout(() => {
          isScrollingDown = false;
          isPaused = false;
        }, 1000);
        return;
      }
      scrollTop += 1;
    } else {
      if (scrollTop <= 0) {
        isPaused = true;
        scrollTop = 0;
        leftPanel.value.scrollTop = scrollTop;
        setTimeout(() => {
          isScrollingDown = true;
          isPaused = false;
        }, 1000);
        return;
      }
      scrollTop -= 1;
    }
    leftPanel.value.scrollTop = scrollTop;
  }, 100);
}
// 左侧核心设备信息栏自动滚动
 
 

// 只保留interval的引用在外部，用于清理
let leftPanelInterval;
// 左侧核心设备信息栏自动滚动结束

// VUE生命周期完成
onMounted(async () => {
  initThreeJS();
  handleDeviceStyle();

  // 获取所有风机图片元素并添加事件监听
  const fanImgs = document.querySelectorAll('.FanImg');
  fanImgs.forEach(img => {
    img.addEventListener('mouseenter', handleFanMouseEnter);
    img.addEventListener('mouseleave', handleFanMouseLeave);
  });

  // 模拟鼠标进入风机和离开
  // const fanImgtimer = setInterval(() => {
  // 获取目标元素
  const targetImg = document.querySelector('.FanImg');  // 或其他选择器
  if (targetImg) {
    // 模拟鼠标进入
    handleFanMouseEnter({ target: targetImg });

  }

  // autoScrollEvents();
  // autoScrollLeftPanel();
  autoScrollEvents();//事件列表自动滚动
  await initGauges() //初始化仪表

  // 左侧事件栏首次启动滚动
  updateLeftPanelScroll();

  // 添加窗口大小改变事件监听
  window.addEventListener('resize', () => {
    gauges.value.forEach(gauge => {
      gauge?.resize()
    })
    // 重新左侧栏计算和更新滚动
    updateLeftPanelScroll();

  })
})

onUnmounted(() => {
  // 卸载模拟鼠标进入和离开
  // clearInterval(fanImgtimer);
  // 组件卸载时移除事件监听
  const fanImgs = document.querySelectorAll('.FanImg');
  fanImgs.forEach(img => {
    img.removeEventListener('mouseenter', handleFanMouseEnter);
    img.removeEventListener('mouseleave', handleFanMouseLeave);
  });
  // 销毁图表实例
  gauges.value.forEach(gauge => {
    gauge?.dispose()
  })
  window.removeEventListener('resize', () => {
    gauges.value.forEach(gauge => {
      gauge?.resize()
    })
  })
})
</script>



<style lang="scss" scoped>
@import 'styles/MiddleSection.scss';
</style>
